// 源插件
import React, { PureComponent } from 'react';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';

// 视图插件
import {
  BackTop,
  Empty,
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
} from 'antd';

// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';
import { connect } from 'dva';
// css OR less预编译器

// 图片

/**
 *  Describe:数据连接
 */

@connect(({ history, loading }) => ({
  history,
  loading: loading.models.historyRule,
}))
@Form.create()
class StockHistoryOrder extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSource: {
      data: [],
      total: [],
      code: 0,
    },
    Beta: '',
    BetaDate: '',
  };

  dataSourcechange() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'history/GetStockHistoryOrder',
      payload: {
        stock: this.state.Beta,
        date: this.state.BetaDate,
        currentDataSource: this.state.currentDataSource,
      },
      callback: res => {
        that.setState({
          dataSource: {
            title: '股票历史订单回报',
            code: 1,
            data: res.list,
            total: [],
            paging: true,
            columns: [
              {
                title: '编号',
                dataIndex: 'id',
                width: 60,
                type: 'number',
                sorter: true,
              },
              {
                title: '股码',
                dataIndex: 'stock',
                width: 80,
                type: 'string',
                sorter: true,
                search: true,
              },
              {
                title: '股名',
                dataIndex: 'stockName',
                width: 110,
                type: 'string',
                sorter: true,
                search: true,
              },
              {
                title: '股数',
                dataIndex: 'stockNumber',
                width: 80,
                type: 'number',
                sorter: true,
              },
              {
                title: '均价',
                width: 80,
                dataIndex: 'avgPrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '货币',
                dataIndex: 'currency',
                width: 60,
                type: 'number',
                filters: [
                  {
                    text: '美元',
                    value: '1',
                  },
                  {
                    text: '人民币',
                    value: '2',
                  },
                  {
                    text: '港元',
                    value: '3',
                  },
                ],
                render: (value, row, index) => {
                  return (
                    <span>
                      {value === 1 ? '美元' : value === 2 ? '人民币' : value === 3 ? '港元' : null}
                    </span>
                  );
                },
              },
              {
                title: '操作类型',
                dataIndex: 'type',
                type: 'number',
                width: 60,
                filters: [
                  {
                    text: '买入',
                    value: '1',
                  },
                  {
                    text: '卖出',
                    value: '0',
                  },
                ],

                render: (value, row, index) => {
                  return <span>{value === 1 ? '买入' : value === 0 ? '卖出' : null}</span>;
                },
              },
              {
                title: ' 交割日期 ',
                type: 'date',
                width: 80,
                dataIndex: 'settlementDate',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: ' 邮件日期 ',
                type: 'date',
                width: 80,
                dataIndex: 'mailTime',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
            ],
          },
        });
      },
    });
  }

  onSelectType(e) {
    this.setState({
      Beta: e.target.value,
    });
  }

  onSelectTime(e) {
    this.setState({
      BetaDate: e._d,
    });
  }

  handleKeyPress(e, key) {
    if (e.key === 'Enter') {
      this.searchBeta(e, key);
    }
  }

  searchBeta() {
    const { dispatch } = this.props;
    dispatch({
      type: 'history/GetStockHistoryOrder',
      payload: {
        stock: this.state.Beta,
        date: this.state.BetaDate,
      },
      callback: res => {
        this.dataSourcechange();
      },
    });
  }

  render() {
    const { record } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <Row>
            <Col md={24} sm={24}>
              输入股票代码：
              <Input
                style={{ width: 240, margin: 8 }}
                onChange={this.onSelectType.bind(this)}
                onKeyPress={e => this.handleKeyPress(e, record)}
              />
              &nbsp;&nbsp;&nbsp;选择时间：
              <DatePicker
                // showTime
                placeholder="请选择"
                format="YYYY-MM-DD"
                style={{ width: 240, margin: 8, marginBottom: 24 }}
                onChange={this.onSelectTime.bind(this)}
                onKeyPress={e => this.handleKeyPress(e, record.key)}
              />
              <Button onClick={this.searchBeta.bind(this)} style={{ margin: 8 }} type="primary">
                搜索
              </Button>
            </Col>
          </Row>
          <StandardTablePro dataSource={this.state.dataSource} />
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    this.dataSourcechange();
  }

  componentWillUnmount() {}
}

export default StockHistoryOrder;
